<template>
    <div>
        <div v-if="!isMult">
            <el-button type="primary" @click="uploadImg()">
                上传<i class="el-icon-upload el-icon--right"></i>
            </el-button>
            <el-image style="width: 100px; height: 100px" :src="image" :preview-src-list="[image]" fit="contain">
            </el-image>
        </div>

        <div v-if="isMult">
            <div class="img-list">
                <el-button type="primary"  @click="uploadImg()">
                    上传<i class="el-icon-upload el-icon--right"></i>
                </el-button>
            </div>
            <div v-for="(img, i) in images" :key="i" class="img-list">
                <el-image
                    style="width: 100px; height: 100px;border: solid 1px #eee;margin-right: 10px;padding: 2px;"
                    :src="img"
                    :preview-src-list="images"
                    fit="contain">
                </el-image>
                <i class="del" @click="images.splice(i, 1);">X</i>
            </div>
            <el-image v-if="images.length <= 0" style="width: 100px; height: 100px">
            </el-image>
        </div>

        <el-dialog title="选择图片" :visible.sync="showAlbum" width="90%" append-to-body center>
            <albumPic @selectImg="selectImg" :showType="1" :mult="isMult"></albumPic>
        </el-dialog>

    </div>
</template>

<script type="text/javascript">
    import albumPic from '@/page/common/album/album_pic';
    export default {
        props: {
             //是否是多图
            isMult: {
                type: Boolean,
                default: false
            },
            //图片绑定的model key
            imgModel: '',
            initData: "",
        },
        components: {
            albumPic
        },
        data() {
            return {
                showAlbum:false,
                mult: false,
                images: [],
                image: '',
            }
        },
        watch:{
            initData(){
				if(this.isMult) this.images = this.initData;
				if(!this.isMult) this.image = this.initData;
            }
        },
        created() {
            if(this.isMult) this.images = this.initData;
            if(!this.isMult) this.image = this.initData;
        },
        methods: {
            uploadImg() {
                this.showAlbum = !this.showAlbum
            },

            //上传的图片
            selectImg(imgUrl) {
                if(imgUrl.constructor  == Array) {
                    if(!this.images) this.images = [];
                    imgUrl.forEach((val) => {
                        this.images.push(val);
                    })
                    this.$emit('selectImg', this.images, this.isMult, this.imgModel);
                }else{
                    this.image = imgUrl;
                    this.$emit('selectImg', this.image, this.isMult, this.imgModel);
                }
                this.showAlbum = false;
            },
        }
    }
</script>

<style type="text/css" scoped>
    .img-list{
        float: left;
        margin-right: 8px;
        position: relative;
    }

    .del {
        color: #000;
        position: absolute;
        top: 0px;
        right: 0px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        line-height: 20px;
        background-color: #F02D2D;
        text-align: center;
        cursor: pointer;
    }
</style>
